<template>
  <el-cascader separator="/" size="small" style="width: 310px" :value="modelValue" :options="treeData" :props="props" @change="handleChange" />
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { getDepartmentListApi } from "@/api/department";
import { tranListToTreeData } from "@/utils/index.js";
import { defineEmits } from "vue";

onMounted(() => {
  getDepartmentList();
});
const treeData = ref([]); // 部门树形数据
defineProps({
  modelValue: {
    type: Number, // 存储的是部门的id  3 4 5
    default: null,
  },
});
const emit = defineEmits(["input"]);
// 级联选择器配置项;
const props = {
  expandTrigger: "hover" as const,
  value: "id",
  label: "name",
};

// 获取部门列表数据并转换为树形结构
const getDepartmentList = async () => {
  const res = tranListToTreeData(await getDepartmentListApi(), 0);
  treeData.value = res;
};

// 级联选择器选中值变化时触发的事件处理函数
// 这里的value是数组类型 因为是多选 所以取到最后一位 就是最后一个选择的id值 也就是最后一个选择的部门id值
// 然后用这个id值去更新表单数据中的departmentId字段
const handleChange = (value) => {
  //若数组长度大于0证明有数据 取到数组的最后一次
  if (value.length > 0) {
    // 将最后一位的id取出来 传出去
    emit("update:modelValue", value[value.length - 1]);
    // formData.value.departmentId = value[value.length - 1];
    // emit("input");
  } else {
    // 如果长度为0 说明值为空
    emit("update:modelValue", null);
    // formData.value.departmentId = null;
  }
};
</script>
<style></style>
